<template>
  <div class="header">
    <van-form @submit="onSubmit">
      <van-cell-group inset class="form-cell-group">
        <van-field
          v-model="name"
          name="name"
          label="商品名称"
          placeholder="请输入商品名称"
          :rules="[{ required: true, message: '请填写商品名称' }]"
          class="styled-field"
        />
        <van-field
          v-model="description"
          name="description"
          label="商品描述"
          placeholder="请输入商品描述"
          :rules="[{ required: true, message: '请填写商品描述' }]"
          class="styled-field"
        />
        <van-field
          v-model="price"
          name="price"
          label="价格 (ETH)"
          placeholder="请输入价格"
          :rules="[{ required: true, message: '请填写价格' }]"
          class="styled-field"
        />
      </van-cell-group>
      <div style="margin: 16px;">
        <van-button
          round
          block
          type="primary"
          native-type="submit"
          class="styled-button"
        >
          发布商品
        </van-button>
      </div>
    </van-form>
  </div>
</template>

<script>
import { ref } from "vue";
import useWeb3 from "../util.js";
import { showSuccessToast } from "vant";

const { contract, web3 } = useWeb3();

const name = ref("");
const description = ref("");
const price = ref("");

const onSubmit = async () => {
  const accounts = await web3.eth.getAccounts();
  const defaultAccount = accounts[0];

  const receipt = await contract.methods.listItem(name.value, description.value, price.value).send({
    from: defaultAccount,
    gas: 1000000,
    gasPrice: "10000000000",
  });
  console.log("receipt", receipt);
  showSuccessToast("发布商品成功");
};

export default {
  name: "SellItemView",
  setup() {
    return {
      name,
      description,
      price,
      onSubmit,
    };
  },
}
</script>

<style scoped>
.header {
  margin: 40px 0 0;
}

body {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}

.form-cell-group {
  /* background-color: #f8f9fa; */
  
  background-image: url('../assets/lan.jpg'); 
  border-radius: 10px;
  padding: 20px;
}

.styled-field {
  margin-bottom: 15px;
  background-color: transparent; 
  border: 1px solid #e9ecef;
  border-radius: 8px;
  padding: 12px 15px;
  font-size: 16px; 
  font-weight: 400; 
  color: #333; 
}
.styled-field:focus {
  border-color: #007bff;
}

.styled-button {
  width: 100%;
  height: 48px;
  border-radius: 24px;
  background-color: #4548E6;
  color: white;
  font-size: 16px;
  font-weight: 500; 
  transition: background-color 0.3s;
}
.styled-button:hover {
  background-color: #0056b3;
}

.van-field__label {
  font-size: 14px; 
  font-weight: 400;
  color: #666;
}
</style>